<template>
  <div style="height: 100vh">
    <template>
      <el-descriptions title="个人信息"
                       :column="2"
                       size="large"
                       style="width: 50%;margin-left: 15%"
                       border>
        <el-descriptions-item label="用户名">{{infoData.username}}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{infoData.name}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{infoData.sex}}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{infoData.sfzh}}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{infoData.tele}}</el-descriptions-item>
        <el-descriptions-item label="电子邮箱">{{infoData.email}}</el-descriptions-item>
      </el-descriptions>
      <br />
      <el-button type="primary" style="margin-left: 20%" @click="editInfo">完善/修改个人信息</el-button>
    </template>

    <el-dialog :visible="dialogFormVisible" title="完善/修改个人信息" :close-on-click-modal="false" :append-to-body="true">
      <el-form :model="form"  ref="login" label-width="80px">
        <el-form-item label="准考证号" prop="username" >
          <el-input type="text" placeholder="可作为登录用户名，往届考生请重新注册" size="small"
                    prefix-icon="el-icon-user"
                    v-model="form.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input type="text" placeholder="用于密码找回等，非常重要" size="small"
                    prefix-icon="el-icon-postcard"
                    v-model="form.name"></el-input>
        </el-form-item>


        <el-form-item label="性别" prop="sex">
          <div>
            <el-radio v-model="form.sex" label="1" size="large">男</el-radio>
            <el-radio v-model="form.sex" label="2" size="large">女</el-radio>
          </div>
        </el-form-item>

        <el-form-item label="电子邮箱" prop="email">
          <el-input type="text" placeholder="用于密码找回等，非常重要" size="small"
                    prefix-icon="el-icon-connection"
                    v-model="form.email"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" prop="email">
          <el-input type="text" placeholder="用于密码找回等，非常重要" size="small"
                    prefix-icon="el-icon-connection"
                    v-model="form.tele"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="email">
          <el-input type="text" placeholder="用于密码找回等，非常重要" size="small"
                    prefix-icon="el-icon-connection"
                    v-model="form.sfzh"></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="modifyInfo">确认修改</el-button>
      </span>
      </template>
    </el-dialog>



  </div>
</template>

<script>
//个人信息
export default {
  name: "PersonInfo",
  data(){
    return {
      type:"",
      //个人信息的数据
      infoData:{
        username:"",
        name:"",
        sex:"",
        sfzh:"",
        tele:"",
        email:"",
      },
      //是否显示对话框
      dialogFormVisible:false,
      // 对话框里面的数据
      form:{},
    }
  },
  mounted() {
    this.getInfo()
  },
  methods:{
    //获取个人信息
    getInfo(){
      let param = new URLSearchParams();
      param.append("username",this.$store.state.user.username )
      this.axios.post("personinfo",
          param
      ).then((response) => {
        console.log(response.data)
        console.log(response.data['msg'])
        this.$forceUpdate()         //解决数据渲染延迟
        if( response.data['msg'] == "ok"){
          this.infoData.name = response.data['name']
          this.infoData.sex = response.data['sex']
          if( response.data['sex'] == "1" ){
            this.infoData.sex = "男"
          }else{
            this.infoData.sex = "女"
          }
          this.infoData.username = response.data['ticket']
          this.infoData.tele = response.data['tele']
          this.infoData.email = response.data['email']
          this.infoData.sfzh = response.data['sfzh']
        }
      })
    },
    //完善个人信息
    editInfo(){
      this.$forceUpdate()         //解决数据渲染延迟
      this.dialogFormVisible = true;
      if( this.infoData.sex == "男" ){
        this.infoData.sex = "1"
      }else{
        this.infoData.sex = "2"
      }
      this.form = this.infoData
    },
    //修改个人信息
    modifyInfo(){
      this.dialogFormVisible = false;
      if( this.infoData.username == this.form.username
          &&
          this.infoData.name == this.form.name
          &&
          this.infoData.sfzh == this.form.sfzh
          &&
          this.infoData.tele == this.form.tele
          &&
          this.infoData.email == this.form.email
          &&
          (( this.infoData.sex == "男" && this.form.sex == "1") || ( this.infoData.sex == "女" && this.form.sex == "2"))
      ){
        //没有什么变化
        this.$message({
          type: 'error',
          message: '修改失败，内容与之前一致'
        });
        return;
      }
      //console.log(index+" "+this.codeData[index]['code'])
      this.$confirm('此操作将修改该个人信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = new URLSearchParams();
        params.append('username',this.form.username);
        params.append('sex',this.form.sex);
        params.append('name',this.form.name);
        params.append('tele',this.form.tele);
        params.append('email',this.form.email);
        params.append('sfzh',this.form.sfzh);

        this.axios.post("modifyinfo",
            params
        ).then((response) => {
          console.log(response.data)
          if (response.data['msg'] == "ok") {
            this.$forceUpdate()         //解决数据渲染延迟
            this.getInfo()
          }
        })
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
        this.getInfo()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    }
  }
}
</script>

<style scoped>
.my-label {
  background-color:#3b6496;
  color:#3b6496;
}
</style>